<template>
	<view>
		<view id="header">
			<view class="top">
				<u-sticky>
					<u-tabs :list="topList" :scrollable="false" lineWidth="25" lineHeight="5" :activeStyle="activeStyle"
						:inactiveStyle="inactiveStyle" lineColor="#6072FF" @click="tabs"></u-tabs>
				</u-sticky>
			</view>
		</view>
		<view class="containers-goods">
			<scroll-view :style="{ height: height + 'px'}" v-if="inventoryList.length > 0" scroll-y="true"
				:scroll-with-animation="true" :enable-back-to-top="true" @scrolltolower="reachBottom">
				<view class="goods-box" v-for="(item,index) in inventoryList" :key="index" @click="nav(item)">
					<view class="box">
						<view class="time">{{$u.timeFormat(Date.parse(item.createTime), 'yyyy-mm-dd hh:MM:ss')}}</view>
						<view class="status" @click.stop="selected(item)">
							<text class="rgba-red"
								v-if="commodityStockRecordStatusEnum.NOT_HANDLED==item.status || item.status==null">未处理</text>
							<text class="rgba-red"
								v-else-if="commodityStockRecordStatusEnum.PROCESSING==item.status">处理中</text>
							<text class="rgba-ash"
								v-else-if="commodityStockRecordStatusEnum.COMPLETED==item.status">已完成</text>
							<text class="rgba-ash"
								v-else-if="commodityStockRecordStatusEnum.HAS_BEEN_CANCELLED==item.status">已取消</text>
							<u-icon name="arrow-right" size="14"></u-icon>
						</view>
					</view>
					<view class="box" style="margin-top: 16rpx;">
						<view class="box" style="width: 320rpx">
							<view>
								<text class="title">备货总数</text>
								<text class="quantity">{{item.numberOfGoodsInStock}}个</text>
							</view>
							<view class="restocking-area">
								<text class="title">补货场地</text>
								<text class="quantity">{{item.numberOfPlacesOfOrigin}}个</text>
							</view>
						</view>
						<view class="details-box">
							<text class="details">详情</text>
							<u-icon name="arrow-right" color="#6072FF" size="14"></u-icon>
						</view>
					</view>
				</view>
			</scroll-view>
			<u-empty v-if="inventoryList.length == 0" text="暂无数据" mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png" />
		</view>
		<u-picker :show="show" :columns="statusColumns" keyName="label" @confirm="okStatus"
			@cancel="show=false"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				height: 0,
				selectedTab: 1,
				statusColumns: [
					[{
							label: '已完成',
							id: 2
						},
						{
							label: '已取消',
							id: 3
						}
					]
				],
				topList: [{
						id: -1,
						name: '全部'
					},
					{
						id: 0,
						name: '未处理'
					},
					{
						id: 1,
						name: '处理中'
					},
					{
						id: 2,
						name: '已完成'
					},
					{
						id: 3,
						name: '已取消'
					}
				],
				commodityStockRecord: null,
				activeStyle: {
					fontSize: "26rpx",
					fontWeight: "bold",
					color: "rgba(0,0,0,1)"
				},
				inactiveStyle: {
					fontSize: "26rpx",
				},
				params: {
					status: -1,
					totalPage: 0,
					pageSize: 10,
					pageNum: 1,
				},
				commodityStockRecordStatusEnum: this.$commodityStockRecordStatusEnum,
				inventoryList: [],
				status: 'loading',
			};
		},
		onReady() {
			this.getPomHeight();
		},
		onLoad(option) {
			this.findInventoryByUserId();
		},
		methods: {
			findInventoryByUserId() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$api('commodityStockRecord.findInventoryByUserId', this.params).then(res => {
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						uni.hideLoading();
						this.params.pageNum = res.data.pageNum;
						this.params.totalPage = res.data.pages;
						this.status = res.data.list.length === 10 ? 'loadmore' : 'nomore';
						this.inventoryList = [...this.inventoryList, ...res.data.list];
						if (this.params.pageNum >= res.data.pages) {
							this.loadStatus = 'nomore';
						}
					} else {
						uni.hideLoading();
						this.$helpers.toast('加载异常:' + res.data.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},
			selected(item) {
				console.log(item.status)
				if (this.commodityStockRecordStatusEnum.COMPLETED == item.status || this.commodityStockRecordStatusEnum
					.HAS_BEEN_CANCELLED == item.status) {
					return;
				}
				this.commodityStockRecord = item;
				this.show = true;
			},
			okStatus(e) {
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				let params = {
					id: this.commodityStockRecord.id,
					status: e.value[0].id
				}
				this.$api('commodityStockRecord.updateCommodityStockRecordStatus', params).then(res => {
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						uni.hideLoading();
						this.show = false;
						this.$helpers.toast('保存成功!');
						let that = this;
						setTimeout(function() {
							that.initialize();
						}, 500)
					} else {
						uni.hideLoading();
						this.$helpers.toast(res.data.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},
			tabs(e) {
				this.selectedTab = e.id;
				this.params.status = e.id;
				this.initialize();
			},
			initialize() {
				this.inventoryList = [];
				this.params.totalPage = 0
				this.params.pageNum = 1
				this.findInventoryByUserId();
			},
			nav(item) {
				uni.navigateTo({
					url: '/pages-vending-machine/my-inventory-stockout/my-inventory-stockout?outTradeNo=' + item
						.outTradeNo
				});
			},
			reachBottom() {
				if (this.status == 'nomore') {
					return;
				}
				this.status = 'loading';
				this.params.pageNum++;
				this.findInventoryByUserId();
			},
			// 获取各个盒子的高度
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#header').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight
					for (let i = 0; i < res.length; i++) {
						this.height -= res[i].height;

					}
				})

			},
		}
	};
</script>

<style lang="scss">
	page {
		background: rgb(239, 239, 239);
	}

	.rgba-ash {
		color: rgba(0, 0, 0, 0.5);
	}

	.rgba-red {
		color: red;
	}

	.top {
		background-color: #FFF;
		padding-bottom: 20rpx;
	}

	.containers-goods {
		padding: 30rpx 24rpx 0 24rpx;

		.goods-box {
			background-color: #FFF;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.status {
					font-size: 26rpx;
					display: flex;
				}

				.title {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.5);
				}

				.quantity {
					margin-left: 8rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.8);
				}

				.details-box {
					display: flex;
					align-items: flex-end;

					.details {
						margin-right: 12rpx;
						font-size: 24rpx;
						color: #6072FF;
					}
				}

				.time {
					font-size: 28rpx;
					color: #222222;
				}
			}
		}
	}
</style>